<template>
  <div
    class="vaw-main-layout-container"
    :class="[
      !getLayoutState.isCollapse
        ? 'main-layout-open-status'
        : 'main-layout-close-status',
      getLayoutState.isFixedNavBar
        ? 'main-layout_fixed-nav-bar'
        : 'main-layout',
    ]"
  >
    <section
      :class="[
        !getLayoutState.isCollapse
          ? 'nav-bar-open-status'
          : 'nav-bar-close-status',
        getLayoutState.isFixedNavBar ? 'fixed-nav-bar' : '',
        !showNavBar ? 'tab-bar-top' : '',
      ]"
    >
      <ly-navbar v-if="showNavBar" />

      <ly-tabbar :show-humburger="isShowHeader" />
    </section>
    <div class="main-base-style">
      <section class="main-section">
        <ly-main />
      </section>
      <section class="footer-wrapper">
        <ly-footer />
      </section>
      <el-backtop target=".main-base-style">
        <div>
          <i class="el-icon-caret-top"></i>
        </div>
      </el-backtop>
    </div>
    <el-backtop target=".vaw-main-layout-container">
      <div>
        <i class="el-icon-caret-top"></i>
      </div>
    </el-backtop>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

import { ILayoutState } from "@/@types/store";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";

@Component({
  name: "LyMainLayout",
  components: {},
})
export default class LyMainLayout extends Vue {
  //#region vue prop =================================
  @Prop({
    required: false,
    default: true,
  })
  showNavBar: boolean;
  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================
  private get getLayoutState(): ILayoutState {
    return LayoutStoreModule;
  }

  private get isShowHeader() {
    return LayoutStoreModule.isShowHeader;
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyMainLayout " + "created");
  }

  mounted() {
    console.log("LyMainLayout " + "mounted");
  }

  beforeDestroy() {
    console.log("LyMainLayout " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private onFixedHeader() {
    LayoutStoreModule.toggleCollapse(!this.getLayoutState.isFixedNavBar);
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>

<style lang="scss" scoped>
@import "src/assets/styles/variables.scss";
.main-layout-open-status {
  margin-left: $menuWidth;
}
.main-layout-close-status {
  margin-left: $minMenuWidth;
}
.nav-bar-open-status.fixed-nav-bar {
  width: calc(100% - #{$menuWidth});
}
.nav-bar-close-status.fixed-nav-bar {
  width: calc(100% - #{$minMenuWidth});
}

.main-layout {
  padding-top: 0;
  overflow-y: auto;
  .main-base-style {
    height: calc(100% - #{$logoHeight + $tabHeight});
  }
}
.main-layout_fixed-nav-bar {
  padding-top: $logoHeight + $tabHeight;
  overflow-y: hidden;
  .main-base-style {
    height: 100%;
    overflow-y: auto;
  }
}

.vaw-main-layout-container {
  height: 100%;
  box-sizing: border-box;
  transition: margin-left $transitionTime;
  .main-base-style {
    box-sizing: border-box;
    padding: 10px;
  }
  .main-section {
    min-height: calc(100% - #{$footerHeight});
    overflow-x: hidden;
  }
  .fixed-nav-bar {
    position: fixed;
    top: 0;
    transition: width $transitionTime;
    z-index: 99;
  }
  .tab-bar-top {
    padding-top: $logoHeight;
  }
}
.is-mobile {
  .main-layout-open-status,
  .main-layout-close-status {
    margin-left: 0;
    transition: none;
  }
  .nav-bar-open-status,
  .nav-bar-close-status {
    width: 100%;
  }
}
</style>
